<template>
  <div>
    <div style="width: 50%; padding-left: 10px;">
      <a-input-search
          v-model:value="data.searchName"
          allow-clear
          enter-button
          placeholder="求职者名称/学校/专业"
          size="large"
          @search="onSearch"
      />

    </div>
    <a-divider orientation="left" style="margin: 10px; color:#1677FF; font-size: 20px">热门-城市-行业</a-divider>
    <div style="width: 80%; padding-left: 10px; margin-bottom: 8px">
      城市:&nbsp;&nbsp;&nbsp;
      <a-radio-group v-model:value="data.studentAddress" buttonStyle="solid" @change="check(data)">
        <a-radio-button value="">不限</a-radio-button>
        <a-radio-button value="北京">北京</a-radio-button>
        <a-radio-button value="上海">上海</a-radio-button>
        <a-radio-button value="广州">广州</a-radio-button>
        <a-radio-button value="深圳">深圳</a-radio-button>
        <a-radio-button value="南京">南京</a-radio-button>
        <a-radio-button value="武汉">武汉</a-radio-button>
        <a-radio-button value="苏州">苏州</a-radio-button>
        <a-radio-button value="成都">成都</a-radio-button>
        <a-radio-button value="杭州">杭州</a-radio-button>
        <a-radio-button value="重庆">重庆</a-radio-button>
        <a-radio-button value="天津">天津</a-radio-button>
      </a-radio-group>
    </div>
    <div style="width: 80%; padding-left: 10px;">
      学历:&nbsp;&nbsp;&nbsp;
      <a-radio-group v-model:value="data.studentHighestEducation" buttonStyle="solid" @change="check(data)">
        <a-radio-button value="">不限</a-radio-button>
        <a-radio-button value="专科">专科</a-radio-button>
        <a-radio-button value="本科">本科</a-radio-button>
        <a-radio-button value="硕士">硕士</a-radio-button>
        <a-radio-button value="博士">博士</a-radio-button>
      </a-radio-group>
    </div>
    <div>
    </div>

  </div>

  <a-list :data-source="listData" :pagination="pagination" item-layout="vertical" size="small">
    <template #footer>
      <div style="width: 80%; padding-left: 10px;">
        <b>祝您慧眼识才，为企业招揽到最合适的伙伴！</b>
        祝您工作顺利，生活美满，前程似锦！
      </div>
    </template>
    <template #renderItem="{ item }">

      <a-list-item key="item.title" class="list-item">
        <a-list-item-meta>
          <template #description>
            {{ item.studentSex }} &nbsp;&nbsp;
            {{ item.studentGraduation }} &nbsp;&nbsp;
            {{ item.studentGpa }}
          </template>
          <template #title>
            <router-link :to="{ path: `/enterprise/querySend/detail/${data.jobId}/${data.enterpriseId}/${item.studentId}` }">{{ item.studentName }}</router-link>
            <span style="float: right">学历：{{ item.studentHighestEducation }}
              <br/>
              <span style="float: right">专业：{{ item.studentMajor }}</span>
            </span>
          </template>
          <template #avatar>
            <a-avatar :src="'http://localhost:8080/file/download?name='+item.studentImgurl"
                      style="width: 70px; height: 70px;"/>
          </template>
        </a-list-item-meta>
        荣誉奖项：{{ truncateText(item.studentHonour) }}
        <br/>
        专业技能：{{ truncateText(item.studentSkills) }}
      </a-list-item>
    </template>
  </a-list>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {pageJobAPI} from "@/apis/job.js";
import http from "@/utils/http.js";
import {useUserStore} from "@/stores/user.js";
import {queryInformationByUserIdAPI} from "@/apis/enterprise.js";
import {pageSendStudentAPI} from "@/apis/send.js";
import {useRoute} from "vue-router";


//获取数据
const useStore = useUserStore();
const listData = ref([]);
const enterpriseUserId = ref(useStore.userInfo.userId);
const data = ref({pageCurrent: 1, pageSize: 5,enterpriseId: '',jobId:'', studentHighestEducation: '', studentAddress: '', searchName: ''});
const getData = async (data,enterpriseUserId,jobId) => {
  const res = await queryInformationByUserIdAPI(enterpriseUserId.value)
  data.enterpriseId = res.data.data.enterpriseId
  data.jobId = jobId.value
  const res1 = await pageSendStudentAPI(data)
  pagination.total = res1.data.data.total
  listData.value = res1.data.data.data
}
//筛选和搜索‘
const FilterAndSearch=async (data)=>{
  const res=await pageSendStudentAPI(data);
  pagination.total= res.data.data.total;
  listData.value=res.data.data.data;

}

// 新增方法用于截断文本并添加省略号
const truncateText = (text) => {
  return text.slice(0, 100) + '. . . . .';
};
const pagination = {
  onChange: page => {
    console.log(page);
    data.value.pageCurrent = page
    getData(data.value)
  },
  pageSize: 5,
  total: 0,
};
// 生命周期
const route = useRoute()
const jobId=ref();
onMounted(() => {
  jobId.value = route.params.jobId;
  getData(data.value, enterpriseUserId,jobId);
});

//搜索
const onSearch = searchValue => {
  FilterAndSearch(data.value);
};
//筛选
const check = data => {
  console.log(data.job_address)
  console.log(data.job_industry)
  FilterAndSearch(data);
}

</script>
<style scoped>
.list-item {
  height: 180px;
  margin: 10px 10px 0;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 20px; /* 你可以调整这个值来改变圆角的大小 */

  h4 {
    background-color: #F5F5F5;
    padding: 9px;
    border-radius: 5px;
  }
}
</style>